<template>
    <div class="manager-panel">
        <el-aside class="aside-bar">
            <el-menu @select="handleSelect" :collapse-transition="false" :collapse="isCollapse"
                :default-active="activeIndex">
                <!-- 首页 -->
                <el-tooltip class="box-item" effect="dark" content="首页" placement="right" :disabled="!isCollapse">
                    <el-menu-item index="1">
                        <el-icon>
                            <HomeFilled />
                        </el-icon>
                        <span slot="title" if-show="this.asideWidth=='180px'">首页</span>
                    </el-menu-item>
                </el-tooltip>


                <!-- 用户管理 -->
                <el-tooltip class="box-item" effect="dark" content="用户管理" placement="right" :disabled="!isCollapse">
                    <el-menu-item index="2">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span slot="title" if-show="this.asideWidth=='180px'">用户管理</span>
                    </el-menu-item>
                </el-tooltip>


                <!-- 作品管理 -->
                <el-tooltip class="box-item" effect="dark" content="作品管理" placement="right" :disabled="!isCollapse">
                    <el-menu-item index="3">
                        <el-icon>
                            <Management />
                        </el-icon>
                        <span slot="title" if-show="this.asideWidth=='180px'">作品管理</span>
                    </el-menu-item>
                </el-tooltip>


                <!-- 活动/公告管理 -->
                <el-tooltip class="box-item" effect="dark" content="活动/公告管理" placement="right" :disabled="!isCollapse">
                    <el-menu-item index="4">
                        <el-icon>
                            <Compass />
                        </el-icon>
                        <span slot="title" if-show="this.asideWidth=='180px'">活动/公告管理</span>
                    </el-menu-item>
                </el-tooltip>


                <!-- 评论管理 -->
                <el-tooltip class="box-item" effect="dark" content="评论管理" placement="right" :disabled="!isCollapse">
                    <el-menu-item index="5">
                        <el-icon>
                            <ChatDotSquare />
                        </el-icon>
                        <span slot="title" if-show="this.asideWidth=='180px'">评论管理</span>
                    </el-menu-item>

                </el-tooltip>

                <!-- 日志管理 -->
                <el-tooltip class="box-item" effect="dark" content="日志管理" placement="right" :disabled="!isCollapse">
                    <el-menu-item index="6">
                        <el-icon>
                            <Checked />
                        </el-icon>
                        <span slot="title" if-show="this.asideWidth=='180px'">日志管理</span>
                    </el-menu-item>
                </el-tooltip>
            </el-menu>
        </el-aside>
        <el-main :style="mainStyle">
            <!-- 面包屑 -->
            <div class="trace">
                <el-icon v-if="isCollapse" @click="handleClick()">
                    <Expand />
                </el-icon>
                <el-icon v-else @click="handleClick()">
                    <Fold />
                </el-icon>

                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: item.path }" v-for="item in routes.matched" :key="item.path">
                        {{ item.meta.title }}
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div>
                <router-view></router-view>
            </div>
        </el-main>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ManagerActiveRoutesMap, ManagerRoutesActiveMap } from '@/utils/route-active'

const activeIndex = ref('')
const routes = useRoute()
const router = useRouter()
const isCollapse = ref(true)

const mainStyle = ref({
    "padding": "0px",
    "width": "1160px",
    "height": "87vh",
    "marginLeft": "65px",
    "position": "fixed",
    "transition": "all 0.5s"
})
const handleClick = () => {
    isCollapse.value = !isCollapse.value
    mainStyle.value.marginLeft = isCollapse.value ? "64px" : "160px"
    mainStyle.value.width = isCollapse.value ? "1160px" : "1070px";
}

const handleSelect = (key: string) => {
    activeIndex.value = key
    var pathName = ManagerActiveRoutesMap.get(key);
    router.push({name: pathName})
}

onMounted(() => {
    activeIndex.value = ManagerRoutesActiveMap.get(routes.name as string)!
})
</script>

<style scoped>
.manager-panel {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    
    .aside-bar {
        width: 160px;
        height: 87vh;
        transition: all 0.5s;
        box-shadow: -1px 0 6px rgba(0, 21, 41, .35);
        background-color: rgb(255, 255, 255);

        .el-menu {
            background-color: rgb(255, 255, 255);
            margin-top: 25px;
            border: none;
        }
    }

    .el-main {
        background-color: rgb(225, 223, 223);
        .trace {
            box-shadow: -1px 1px 3px rgba(10, 21, 41, .35);
            background-color: white;
            margin-left: 2px;
            width: 100%;
            font-size: 18px;
            color: rgb(0, 0, 0);
            font-weight: bold;
            cursor: pointer;
            padding: 5px;
            display: flex;
            border-radius: 5px;
        }
    }
}


::v-deep .el-menu-item.is-active {
        background-color: rgb(110, 128, 196);
        color: white;
    }

    ::v-deep .el-menu-item {
        box-shadow: -1px 2px 6px rgba(10, 21, 41, .35);
        margin-right: 3px;
        margin-top: 10px;
        font-weight: bold;
        background-color: rgb(242, 242, 242);
        border-radius: 5px;

    }
</style>